<template>
  <div class="side-config">
    <div class="title">{{ $t("editFormula.attribute") }}</div>
    <div class="config">
      <compConfig v-show="selectedComponent.id" />
      <pageConfig v-show="!selectedComponent.id" />
    </div>
  </div>
</template>
<script setup>
import { ref, computed } from "vue";
import editStore from "@/store/editStore.js";
import pageConfig from "./pageConfig/index.vue";
import compConfig from "./compConfig/index.vue";
import { useI18n } from "vue-i18n";

const store = editStore();
const { t: $t } = useI18n();

let selectedComponent = computed(() => store.selectedComponent);
</script>
<style scoped lang="scss">
.side-config {
  width: 100%;
  height: 100%;
  border-left: 1px solid #bbb;
  .title {
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: center;
  }
  .config {
    width: 100%;
    height: calc(100% - 30px);
    overflow: auto;
    padding: 20px 10px;
  }
}
</style>
